<template>
  <div class="all" v-loading="loading" element-loading-text="加载中..." >
    <el-tooltip  content="展开侧栏" placement="top-end" v-if="folded">
      <el-icon class="expand-aside" @click="doExpand"><Expand /></el-icon>
    </el-tooltip>
    <el-tooltip  content="折叠侧栏" placement="top-end" v-if="!folded">
      <el-icon class="fold-aside" @click="doFold"><Fold /></el-icon>
    </el-tooltip>
    <div class="aside" v-show="route.meta.showInHeader" v-if="asideShow">
      <Aside :class="{'aside-in': asideIn, 'aside-out':asideOut}"/>
    </div>
    <div class="box" :class="{'box-fold': folded}">
      <div class="header" v-show="route.meta.showInHeader">
        <Header />
      </div>
      <div class="main" :class="{'main-in-animation': inAnimation}">
        <router-view v-slot="{ Component }">
          <transition>
            <keep-alive :exclude="['Login', 'CreateCategroy', 'ImageOperate']">
              <component :is="Component" />
            </keep-alive>
          </transition>
        </router-view>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// 在这里写第一次进入页面要执行的代码
import { ref, nextTick } from "vue"
import { useRoute, useRouter } from "vue-router"
import Aside from "./components/layout/Aside.vue"
import Header from "./components/layout/Header.vue"
import { getUserByToken } from "./request/user"
import { useUserStore } from "./store/user"
import { quitOut, startIn } from "./util/chore"
import { useImageStore } from "./store/image"
const route = useRoute()
const router = useRouter()
let rememberMe = localStorage.getItem('rememberMe') || ''
let token = localStorage.getItem('token') || ''
const userStore = useUserStore()
const loading = ref(true)
const inAnimation = ref(false)
const [folded, doAsideOk, asideIn, asideOut, asideShow] = [ref(false), ref(true), ref(false), ref(false), ref(true)]
const imageStore = useImageStore()
if(rememberMe == 'true'){
  if(token){
    // 如果选择记住密码，并且有token，则在进入网页时进行token验证
    getUserByToken(token).then(
      value => {
        // token正确
        if(value.data.account){
          startIn(value.data, true)
          loading.value = false
        }
        // token错误
        else{
          quitOut()
          loading.value = false
        }
      },
      error => {
        loading.value = false
      }
    )
  }
  else{
    quitOut()
    loading.value = false
  }
}
else{
  quitOut()
  loading.value = false
}
router.afterEach(() => {
  inAnimation.value = true
  setTimeout(() => {
    inAnimation.value = false
  }, 1000);
})
function fitResize(){
  try{
    imageStore.debounceResizeImage()
  }
  catch(e){

  }
}
function doFold(){
  if(doAsideOk.value){
    doAsideOk.value = false
    asideOut.value = true
    asideIn.value = false
    setTimeout(() => {
      doAsideOk.value = true
      asideShow.value = false
      folded.value = true
      setTimeout(() => { fitResize() }, 50);
    }, 1000);
  }
}

function doExpand(){
  if(doAsideOk.value){
    doAsideOk.value = false
    asideShow.value = true
    asideOut.value = false
    asideIn.value = true
    setTimeout(() => {
      doAsideOk.value = true;
      folded.value = false
      setTimeout(() => { fitResize() }, 50);
    }, 1000);
  }
}
</script>

<style scoped>

</style>